function Tooltip(allow_top_position, text, leftside, size, bg_color, outline_color, text_color, curve, cell){

    //表示するテキスト
    if (text) {
        this.text = text;
    }
    else {
        this.text = "";
    }

    //サイズ
    //軸変更ボタン等をつけるため１行増やす
    var slicedstrings = sliceString(this.text, 15);
    var setsize = size || [15 * 17, (slicedstrings.length+1) * 20 + 20];
    this.size = setsize || [250, 200];

    //矢印の先端の場所
    this.allow_top_x = allow_top_position[0];
    this.allow_top_y = allow_top_position[1];

    this.bg_color = bg_color || 'rgba(0,0,0,0.5)';
    this.outline_color = outline_color || 'rgb(240,240,240)';
    this.text_color = text_color || 'rgb(255,255,255)';
    this.curve = curve || 30;

    //吹出しの場所
    if (leftside) {
        this.leftside = false;
    }
    else {
        this.leftside = leftside;
    }


    this.showTooltip = function(){

        //ロード中ならツールチップ表示なし
        if (loading){
            return false;
        }


        var tooltip_width = this.size[0];
        var tooltip_height = this.size[1];
        var tooltip_allow_width = 30;
        var tooltip_allow_height = 5;
        var curve = this.curve;
        //影を消す
        ctx.shadowColor = 'rgba(0,0,0,0)';
        ctx.strokeStyle = this.outline_color;
        ctx.fillStyle = this.bg_color;
        ctx.lineWidth = 3;
        ctx.beginPath();
        ctx.moveTo(this.allow_top_x, this.allow_top_y);
        if (leftside) {
            //枠
            ctx.lineTo(this.allow_top_x - tooltip_allow_width, this.allow_top_y + tooltip_allow_height);
            ctx.lineTo(this.allow_top_x - tooltip_allow_width, this.allow_top_y + tooltip_height / 2 - curve);
            ctx.quadraticCurveTo(this.allow_top_x - tooltip_allow_width, this.allow_top_y + tooltip_height / 2, this.allow_top_x - tooltip_allow_width - curve, this.allow_top_y + tooltip_height / 2);
            ctx.lineTo(this.allow_top_x - tooltip_width + curve, this.allow_top_y + tooltip_height / 2);
            ctx.quadraticCurveTo(this.allow_top_x - tooltip_width, this.allow_top_y + tooltip_height / 2, this.allow_top_x - tooltip_width, this.allow_top_y + tooltip_height / 2 - curve);
            ctx.lineTo(this.allow_top_x - tooltip_width, this.allow_top_y - tooltip_height / 2 + curve);
            ctx.quadraticCurveTo(this.allow_top_x - tooltip_width, this.allow_top_y - tooltip_height / 2, this.allow_top_x - tooltip_width + curve, this.allow_top_y - tooltip_height / 2);
            ctx.lineTo(this.allow_top_x - tooltip_allow_width - curve, this.allow_top_y - tooltip_height / 2);
            ctx.quadraticCurveTo(this.allow_top_x - tooltip_allow_width, this.allow_top_y - tooltip_height / 2, this.allow_top_x - tooltip_allow_width, this.allow_top_y - tooltip_height / 2 + curve);
            ctx.lineTo(this.allow_top_x - tooltip_allow_width, this.allow_top_y - tooltip_allow_height);

        }
        else {
            ctx.lineTo(this.allow_top_x + tooltip_allow_width, this.allow_top_y + tooltip_allow_height);
            ctx.lineTo(this.allow_top_x + tooltip_allow_width, this.allow_top_y + tooltip_height / 2 - curve);
            ctx.quadraticCurveTo(this.allow_top_x + tooltip_allow_width, this.allow_top_y + tooltip_height / 2, this.allow_top_x + tooltip_allow_width + curve, this.allow_top_y + tooltip_height / 2);
            ctx.lineTo(this.allow_top_x + tooltip_width - curve, this.allow_top_y + tooltip_height / 2);
            ctx.quadraticCurveTo(this.allow_top_x + tooltip_width, this.allow_top_y + tooltip_height / 2, this.allow_top_x + tooltip_width, this.allow_top_y + tooltip_height / 2 - curve);
            ctx.lineTo(this.allow_top_x + tooltip_width, this.allow_top_y - tooltip_height / 2 + curve);
            ctx.quadraticCurveTo(this.allow_top_x + tooltip_width, this.allow_top_y - tooltip_height / 2, this.allow_top_x + tooltip_width - curve, this.allow_top_y - tooltip_height / 2);
            ctx.lineTo(this.allow_top_x + tooltip_allow_width + curve, this.allow_top_y - tooltip_height / 2);
            ctx.quadraticCurveTo(this.allow_top_x + tooltip_allow_width, this.allow_top_y - tooltip_height / 2, this.allow_top_x + tooltip_allow_width, this.allow_top_y - tooltip_height / 2 + curve);
            ctx.lineTo(this.allow_top_x + tooltip_allow_width, this.allow_top_y - tooltip_allow_height);
        }
        ctx.lineTo(this.allow_top_x, this.allow_top_y);
        ctx.fill();
        ctx.stroke();

        //テキスト表示
        ctx.fillStyle = this.text_color;
        //ctx.font = "14px 'sans serif'";
        ctx.font = "14px 'monospace'";
        ctx.textBaseline = 'middle';
        ctx.textAlign = 'center';
        //ctx.fillText(this.text,this.allow_top_x - (tooltip_width + tooltip_allow_width)/2,this.allow_top_y);


        var sliced_text = sliceString(this.text, 10);
        //sliced_text.push("次の軸   次のコンテンツ");
        //一文字あたりのピクセル数
        var fontPx = 18;
        for (var i = 0; i < sliced_text.length; i++) {
            var center_x;
            var center_y = this.allow_top_y;
            var current_str_block_center_y;
            if (leftside) {
                center_x = this.allow_top_x - (tooltip_width + tooltip_allow_width) / 4 - 30;
            }
            else {
                center_x = this.allow_top_x + (tooltip_width + tooltip_allow_width) / 4 *3 - 30;
            }
            if (i % 2 == 0) {
                //偶数
                current_str_block_center_y = center_y + (i - sliced_text.length / 2 + 1 / 2) * fontPx;
            }
            else {
                //奇数
                current_str_block_center_y = center_y + (2 * i + 1 - sliced_text.length) / 2 * fontPx;
            }

            //最後の行だけ箱をオーバーレイ＋テキスト色を変えて描画
            /*
            if (i == sliced_text.length-1){
                var axis_control_line_y = current_str_block_center_y;
                ctx.fillStyle = 'rgba(255,255,255,0.9)';
                curvyCornerFillRect(center_x - 80, current_str_block_center_y -11,45, 18, 5, false);
                curvyCornerFillRect(center_x - 22, current_str_block_center_y -11,98, 18, 5, false);
                ctx.fillStyle = 'rgb(80,80,80)';
            }
            */
            ctx.fillText(sliced_text[i], center_x, current_str_block_center_y);

        }

        /*
                //軸制御ボタンにマウスが載っているかを取得する
        if ((mouseX > center_x - 100 && mouseX < center_x - 40) && (mouseY > axis_control_line_y - fontPx/2 && mouseY < axis_control_line_y + fontPx/2)) {
            cell.onmouse = true;
            next_axis_clicked = true;
            next_contents_clicked = false;
        }
        else if ((mouseX > center_x - 20 && mouseX < center_x + 80) && (mouseY > axis_control_line_y - fontPx/2 && mouseY < axis_control_line_y + fontPx/2)){
            cell.onmouse = true;
            next_contents_clicked = true;
            next_axis_clicked = false;
        }else{
            next_axis_clicked = false;
            next_contents_clicked = false;
        }
    */
        
       
        //TODO-画像が読み込まれるのを待ってから処理を続行 (onloadで確実に読み込みたい)
        //cell.data.image.onload = function() {

        if (leftside) {
            //枠
            var drawimagepos_x = (tooltip_width/2 - cell.data.image.width)/2 + this.allow_top_x - tooltip_width - 10;
            var drawimagepos_y = (tooltip_height - 40 - cell.data.image.height)/2 + this.allow_top_y - (tooltip_height - 40)/2;
            ctx.drawImage(cell.data.image, drawimagepos_x, drawimagepos_y);
        }
        else {
            var drawimagepos_x = (tooltip_width/2 - cell.data.image.width)/2 + this.allow_top_x + tooltip_allow_width - 10;
            var drawimagepos_y = (tooltip_height - 40 - cell.data.image.height)/2 + this.allow_top_y - (tooltip_height - 40)/2;
            ctx.drawImage(cell.data.image, drawimagepos_x, drawimagepos_y);
        }

    //}



    };
};

function BoardTooltip(allow_top_position, text, leftside, size, bg_color, outline_color, text_color, curve, cell){

    //表示するテキスト
    if (text) {
        this.text = text;
    }
    else {
        this.text = "";
    }

    //サイズ
    //軸変更ボタン等をつけるため１行増やす
    var slicedstrings = sliceString(this.text, 15);
    var setsize = size || [15 * 20, (slicedstrings.length) * 45];
    this.size = setsize || [250, 100];

    //矢印の先端の場所
    this.allow_top_x = allow_top_position[0];
    this.allow_top_y = allow_top_position[1];

    this.bg_color = bg_color || 'rgba(255,255,255,0.5)';
    this.outline_color = outline_color || 'rgb(150,150,150)';
    this.text_color = text_color || 'rgb(30,30,30)';
    this.curve = curve || 30;

    //吹出しの場所
    if (leftside) {
        this.leftside = false;
    }
    else {
        this.leftside = leftside;
    }


    this.showTooltip = function(){

        //ロード中ならツールチップ表示なし
        if (loading){
            return false;
        }

        var tooltip_width = this.size[0];
        var tooltip_height = this.size[1];
        var tooltip_allow_width = 30;
        var tooltip_allow_height = 5;
        var curve = this.curve;
        //影を消す
        ctx.shadowColor = 'rgba(0,0,0,0)';
        ctx.strokeStyle = this.outline_color;
        ctx.fillStyle = this.bg_color;
        ctx.lineWidth = 3;
        ctx.beginPath();
        ctx.moveTo(this.allow_top_x, this.allow_top_y);
        if (leftside) {
            //枠
            ctx.lineTo(this.allow_top_x - tooltip_allow_width, this.allow_top_y + tooltip_allow_height);
            ctx.lineTo(this.allow_top_x - tooltip_allow_width, this.allow_top_y + tooltip_height / 2 - curve);
            ctx.quadraticCurveTo(this.allow_top_x - tooltip_allow_width, this.allow_top_y + tooltip_height / 2, this.allow_top_x - tooltip_allow_width - curve, this.allow_top_y + tooltip_height / 2);
            ctx.lineTo(this.allow_top_x - tooltip_width + curve, this.allow_top_y + tooltip_height / 2);
            ctx.quadraticCurveTo(this.allow_top_x - tooltip_width, this.allow_top_y + tooltip_height / 2, this.allow_top_x - tooltip_width, this.allow_top_y + tooltip_height / 2 - curve);
            ctx.lineTo(this.allow_top_x - tooltip_width, this.allow_top_y - tooltip_height / 2 + curve);
            ctx.quadraticCurveTo(this.allow_top_x - tooltip_width, this.allow_top_y - tooltip_height / 2, this.allow_top_x - tooltip_width + curve, this.allow_top_y - tooltip_height / 2);
            ctx.lineTo(this.allow_top_x - tooltip_allow_width - curve, this.allow_top_y - tooltip_height / 2);
            ctx.quadraticCurveTo(this.allow_top_x - tooltip_allow_width, this.allow_top_y - tooltip_height / 2, this.allow_top_x - tooltip_allow_width, this.allow_top_y - tooltip_height / 2 + curve);
            ctx.lineTo(this.allow_top_x - tooltip_allow_width, this.allow_top_y - tooltip_allow_height);

        }
        else {
            ctx.lineTo(this.allow_top_x + tooltip_allow_width, this.allow_top_y + tooltip_allow_height);
            ctx.lineTo(this.allow_top_x + tooltip_allow_width, this.allow_top_y + tooltip_height / 2 - curve);
            ctx.quadraticCurveTo(this.allow_top_x + tooltip_allow_width, this.allow_top_y + tooltip_height / 2, this.allow_top_x + tooltip_allow_width + curve, this.allow_top_y + tooltip_height / 2);
            ctx.lineTo(this.allow_top_x + tooltip_width - curve, this.allow_top_y + tooltip_height / 2);
            ctx.quadraticCurveTo(this.allow_top_x + tooltip_width, this.allow_top_y + tooltip_height / 2, this.allow_top_x + tooltip_width, this.allow_top_y + tooltip_height / 2 - curve);
            ctx.lineTo(this.allow_top_x + tooltip_width, this.allow_top_y - tooltip_height / 2 + curve);
            ctx.quadraticCurveTo(this.allow_top_x + tooltip_width, this.allow_top_y - tooltip_height / 2, this.allow_top_x + tooltip_width - curve, this.allow_top_y - tooltip_height / 2);
            ctx.lineTo(this.allow_top_x + tooltip_allow_width + curve, this.allow_top_y - tooltip_height / 2);
            ctx.quadraticCurveTo(this.allow_top_x + tooltip_allow_width, this.allow_top_y - tooltip_height / 2, this.allow_top_x + tooltip_allow_width, this.allow_top_y - tooltip_height / 2 + curve);
            ctx.lineTo(this.allow_top_x + tooltip_allow_width, this.allow_top_y - tooltip_allow_height);
        }
        ctx.lineTo(this.allow_top_x, this.allow_top_y);
        ctx.fill();
        ctx.stroke();

        //テキスト表示
        ctx.fillStyle = this.text_color;
        //ctx.font = "14px 'sans serif'";
        ctx.font = "18px 'monospace'";
        ctx.textBaseline = 'middle';
        ctx.textAlign = 'center';
        //ctx.fillText(this.text,this.allow_top_x - (tooltip_width + tooltip_allow_width)/2,this.allow_top_y);


        var sliced_text = sliceString(this.text, 14);
        //sliced_text.push("次の軸   次のコンテンツ");
        //一文字あたりのピクセル数
        var fontPx = 18;
        for (var i = 0; i < sliced_text.length; i++) {
            var center_x;
            var center_y = this.allow_top_y;
            var current_str_block_center_y;
            if (leftside) {
                center_x = this.allow_top_x - (tooltip_width + tooltip_allow_width)/2;
            }
            else {
                center_x = this.allow_top_x + (tooltip_width + tooltip_allow_width)/2;
            }
            if (i % 2 == 0) {
                //偶数
                current_str_block_center_y = center_y + (i - sliced_text.length / 2 + 1 / 2) * fontPx;
            }
            else {
                //奇数
                current_str_block_center_y = center_y + (2 * i + 1 - sliced_text.length) / 2 * fontPx;
            }

            //最後の行だけ箱をオーバーレイ＋テキスト色を変えて描画
            /*
            if (i == sliced_text.length-1){
                var axis_control_line_y = current_str_block_center_y;
                ctx.fillStyle = 'rgba(255,255,255,0.9)';
                curvyCornerFillRect(center_x - 80, current_str_block_center_y -11,45, 18, 5, false);
                curvyCornerFillRect(center_x - 22, current_str_block_center_y -11,98, 18, 5, false);
                ctx.fillStyle = 'rgb(80,80,80)';
            }
            */
            ctx.fillText(sliced_text[i], center_x, current_str_block_center_y);

        }

        /*
                //軸制御ボタンにマウスが載っているかを取得する
        if ((mouseX > center_x - 100 && mouseX < center_x - 40) && (mouseY > axis_control_line_y - fontPx/2 && mouseY < axis_control_line_y + fontPx/2)) {
            cell.onmouse = true;
            next_axis_clicked = true;
            next_contents_clicked = false;
        }
        else if ((mouseX > center_x - 20 && mouseX < center_x + 80) && (mouseY > axis_control_line_y - fontPx/2 && mouseY < axis_control_line_y + fontPx/2)){
            cell.onmouse = true;
            next_contents_clicked = true;
            next_axis_clicked = false;
        }else{
            next_axis_clicked = false;
            next_contents_clicked = false;
        }
    */
        
       
        //TODO-画像が読み込まれるのを待ってから処理を続行 (onloadで確実に読み込みたい)
        //cell.data.image.onload = function() {

    //}



    };
};
